﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testui.aspx.cs" Inherits="Web.testui" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    
    <script src="../../Scripts/jquery_source/jquery-1.7.1.min.js"></script>
    <script src="../../ui/jquery-ui.js"></script>
    <script src="../../ui/jquery.ui.accordion.js"></script>
    <script src="../../ui/jquery.ui.autocomplete.js"></script>
    <script src="../../ui/jquery.ui.button.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.datepicker.js"></script>
    <script src="../../ui/jquery.ui.dialog.js"></script>
    <script src="../../ui/jquery.ui.draggable.js"></script>
    <script src="../../ui/jquery.ui.droppable.js"></script>
    <script src="../../ui/jquery.ui.effect-blind.js"></script>
    <script src="../../ui/jquery.ui.effect-bounce.js"></script>
    <script src="../../ui/jquery.ui.effect-clip.js"></script>
    <script src="../../ui/jquery.ui.effect-drop.js"></script>
    <script src="../../ui/jquery.ui.effect-explode.js"></script>
    <script src="../../ui/jquery.ui.effect-fade.js"></script>
    <script src="../../ui/jquery.ui.effect-fold.js"></script>
    <script src="../../ui/jquery.ui.effect-highlight.js"></script>
    <script src="../../ui/jquery.ui.effect-pulsate.js"></script>
    <script src="../../ui/jquery.ui.effect-scale.js"></script>
    <script src="../../ui/jquery.ui.effect-shake.js"></script>
    <script src="../../ui/jquery.ui.effect-slide.js"></script>
    <script src="../../ui/jquery.ui.effect-transfer.js"></script>
    <script src="../../ui/jquery.ui.effect.js"></script>
    <script src="../../ui/jquery.ui.menu.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.position.js"></script>
    <script src="../../ui/jquery.ui.progressbar.js"></script>
    <script src="../../ui/jquery.ui.resizable.js"></script>
    <script src="../../ui/jquery.ui.selectable.js"></script>
    <script src="../../ui/jquery.ui.slider.js"></script>
    <script src="../../ui/jquery.ui.sortable.js"></script>
    <script src="../../ui/jquery.ui.spinner.js"></script>
    <script src="../../ui/jquery.ui.tabs.js"></script>
    <script src="../../ui/jquery.ui.tooltip.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
    <script src="Scripts/jquery.form.js"></script>

    <link href="themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.accordion.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.all.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.autocomplete.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.base.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.button.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.core.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.datepicker.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.dialog.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.menu.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.progressbar.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.resizable.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.selectable.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.slider.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.spinner.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.tabs.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.theme.css" rel="stylesheet" />
    <link href="themes/base/jquery.ui.tooltip.css" rel="stylesheet" />

    <script type="text/javascript">
        $(function () {
            //fnOpen();
        });
        function fnOpen() {
            $("#mydraggable").addClass("enable");
            $("#mydraggable").draggable();
            $("#mydatepicker").datepicker({
                dateFormat: 'yy-mm-dd',
                minDate: -10000,
                maxDate: +10000,
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                showWeek: true,
                firstDay: 1,
                showOn: "button",
                buttonImageOnly: true,
            });
            $("#dialog-form").dialog();
        }



        function checkLength(o,to, msg, min, max) {
            if (o.val() != undefined) {
                if (o.val().length > max || o.val().length < min) {
                    o.addClass("ui-state-error");//为当前的错误域添加CSS样式 
                    updateTip(to,msg + "的长度必须在" + min + "到" + max + "之间");
                    //更新提示区域的信息 
                    return false;
                } else {
                    //如果验证通过则移除当前对象的CSS错误样式 
                    o.removeClass("ui-state-error");
                    return true;
                }
            } else {
                return true;
            }
        }

        //通过正则表达式验证内容的方法,o为表单域对象,reg为正则表达式,n为错误提示信息
        function checkReg(o, to,reg, n) {
            if (!reg.test(o.val())) {
                o.addClass("ui-state-error");
                updateTip(to,n);
                return false;
            }
            else {
                o.removeClass("ui-state-error");
                return true;
            }
        }

     
        function updateTip(to,t) {
            to.text(t).addClass("ui-state-highlight");
        }

        function fnOpenDialog() {
            var uname = $("#uname"),
            password = $("#upass"),
            email = $("#email"),
            birth = $("#birth"),
            fields = $([]).add(uname),
            tips = $(".validateTips");

            email.text("e-mail");

            $("#dialog-form").dialog({
                modal: true,
                open: function () {
                    tips.removeClass().text("所有的表单域都为必填项."); 
                    fields.removeClass("ui-state-error");
                    fields.val("");
                },
                buttons: {
                    提交: function () {
                        //点击提交按钮时执行的事件 
                        var chk = true;
                        //验证字段长度是否符合要求 
                        chk = chk && checkLength(uname,tips, "username", 2, 15);
                        chk = chk && checkLength(password,tips, "password", 6, 20);
                        chk = chk && checkLength(email, tips,"email", 6, 40);
                        chk = chk && checkLength(birth, tips,"birthday", 8, 10);

                        //正则表达式验证用户名和email是否合法
                        chk = chk && checkReg(uname,tips, /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z])|_\w*$/, "用户名必须以字母、下划线或者汉字开头,请修改后提交");
                        chk = chk && checkReg(email, tips, /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, "请输入正确的email格式,格式如下:admin@yahoo.com");

                        if (chk) {
                            //验证通过后移除提示处的样式和错误消息 
                            tips.removeClass().text("");
                            //序列化表单
                            var user = $("#login-form").formSerialize();
                            //var user = $("#login-form").Serialize();
                            //var user = $("#login-form").serializeObject();
                            //发起ajax请求 
                            $.ajax({//通过 HTTP 请求加载远程数据
                                type: 'post',
                                //url: '${path}/UserAction?method=register',
                                url:"/userRegister.aspx",
                                data: user,
                                success: function (msg) {
                                    if (msg == "reg success") {
                                        $("#dialog-form").dialog("close");
                                    } else {
                                        alert("服务器异常,请稍后再试");
                                    }
                                },
                                error: function () {
                                    alert("ajax请求失败");
                                }
                            });
                        }//end if
                    },//end 提交 按钮
                },//end button
            });
        }
    </script>
</head>
<body>

    <div id="container">
        <div id="mydraggable">
            <h2>this is my draggable</h2>
        </div>
        <div id="mydroppable">
            <h2>this is my droppable</h2>
        </div>
        <div id="myresizable">
            <h2>this is my resizable</h2>
        </div>
        <div id="myselectable">
            <h2>this is my selectable</h2>
        </div>
        <div id="mysortable">
            <h2>this is my sortable</h2>
        </div>
        <div id="mybutton">
            <h2>this is my le</h2>
        </div>

        <div id="dialog-form" class="ui-widget  ui-widget-content ui-corner-all" title="用户登录">
            <p id="login_tip"></p>
            <form id="login-form">
                <fieldset>
                    username:<input type="text" id="uname" name="username" class="text ui-wigget-content ui-corner-all" />
                    password:<input type="password" id="upass" name="password" class="text ui-wigget-content ui-corner-all" />
                    email:<input type="text" id="email" name="email" class="text ui-wigget-content ui-corner-all" />
                    birth:<input type="text" id="birth" name="birth" class="text ui-wigget-content ui-corner-all" />
                    <p class="validateTips"></p> 
                </fieldset>
            </form>
        </div>

        <input type="button" value="登录" onclick="javascript: fnOpenDialog()" />
        <div id="myaccordion">
            <h2>this is my accordion</h2>
        </div>
        <div id="mymytabs">
            <h2>this is my tabs</h2>
        </div>
        <input type="text" id="mydatepicker">
            <h2>this is my mydatepicker</h2>
        </input>
        <div id="myautocompelete">
            <h2>this is my autocompelete</h2>
        </div>
        <div id="myprogressbar">
            <h2>this is my progressbar</h2>
        </div>
        <div id="myslider">
            <h2>this is my slider</h2>
        </div>
        <div id="jquery_each">
            <input type="button" value="btn_test_each" onclick="javascript: testeach()" />
            <script type="text/javascript">
                function testeach()
                {
                    var arr1 = ["a", "bb", "ccc"];
                    $.each(arr1, function (i, val) {
                        alert(i);
                        alert(val);
                    })
                }

            </script>
        </div>
    </div>


</body>
</html>
